<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!-- 重置样式 -->
		<link rel="stylesheet" href="../css/reset.css" />
		<!-- 常态化样式 -->
		<link rel="stylesheet" href="../css/normalize.css" />
		<!-- 公共样式 -->
		<link rel="stylesheet" href="../css/common.css" />
		<!-- 当前样式 -->
		<link rel="stylesheet" href="../css/logIn.css" />
	</head>
	<body>
		<!-- 登录 -->
		<!-- 左边登录图片 -->
		<div id="loginft"></div>
		<!-- 右边登录 -->
		<div id="loginrt">
			<!-- 模态框 -->
			<div id="maskbox">
				<!-- 模态框标题 -->
				<div class="maskboxImg"></div>
				<!-- tab区 -->
				<div id="maskTab">
					<!-- 账号登录 -->
					<a href="#" class="active">账号登录</a>
					<i></i>
					<!-- 扫码登录 -->
					<a href="#">扫码登录</a>
				</div>
				<!-- 登录 -->
				<div id="maskloguser">
					<!-- 表单区 -->
					<form action="#" method="post" id="UForm">
						<!-- 用户名 -->
						<p id="loginUser">
							<i></i>
							<input
								type="text"
								id="user"
								placeholder="用户名/手机号/邮箱"
							/><span></span>
						</p>
						<!-- 密码 -->
						<p id="loginPwd">
							<i></i>
							<input type="password" id="pwd" placeholder="密码" /><span></span>
						</p>
						<!-- 忘记密码 -->
						<p id="forgetPwd">
							<a href="#" class="fr">忘记密码</a>
						</p>
						<!-- 登录按钮 -->
						<p>
							<button onclick="btn()" id="btn">登录</button>
						</p>
						<!-- 立即注册 -->
						<p class="fr">
							还没有源码账号,
							<a href="#">立即注册 &gt;</a>
						</p>
					</form>
					<!-- 扫码表单 -->
					<form id="QRForm" action="index.html">
						<div class="flex-c-c">
							<img src="../imgs/wechat-white.png" alt="图片已损坏" />
							<p>微信扫码登录</p>
							<p>未关注公众号,请先关注后再登录</p>
						</div>
						<!-- 立即登录 -->
						<p class="az">还没有源码账号,<a href="#">立即注册 &gt;</a></p>
					</form>
				</div>
			</div>
		</div>
		<script src="../js/util.js"></script>
		<script src="../js/logIn.js"></script>
		<script>
			var user = document.getElementById("user");
			var pwd = document.getElementById("pwd");
			var spn = document.getElementsByTagName("span");
			var a = /^[\u4e00-\u9fa5_a-zA-Z0-9]{6,12}$/;
			var b = /^\w{6,12}$/;
			var c = /^[0-9]{6,12}$/;
			var d = /^[a-zA-z]{6,12}$/;
			var aa = 0,
				bb = 0,
				cc = 0;
			user.onfocus = function () {
				spn[0].innerHTML = "6-12个字符";
			};
			user.onblur = function () {
				if (user.value == "") {
					spn[0].innerHTML = "不能为空";
					aa = 0;
				} else if (a.test(user.value) == false) {
					spn[0].innerHTML = "长度不在范围内或者存在非法字符";
					aa = 0;
				} else {
					spn[0].innerHTML = "正确";
					aa = 1;
				}
			};
			pwd.onfocus = function () {
				spn[1].innerHTML = "长度在 6-12 个字符";
			};
			pwd.onblur = function () {
				if (pwd.value == "") {
					spn[1].innerHTML = "不能为空";
					bb = 0;
				} else if (b.test(pwd.value) == false) {
					spn[1].innerHTML = "长度不在范围内或者存在非法字符";
					bb = 0;
				} else if (c.test(pwd.value) == true) {
					spn[1].innerHTML = "不能全是数字";
					bb = 0;
				} else if (d.test(pwd.value) == true) {
					spn[1].innerHTML = "不能全是字母";
					bb = 0;
				} else {
					spn[1].innerHTML = "正确";
					bb = 1;
				}
			};
			function btn() {
				if (aa + bb == 2) {
					alert("提交成功");
				} else {
					alert("提交失败");
				}
			}
		</script>
	</body>
</html>
